<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- 
      <input type="text" 
      在html标签中,本质是第一步,先将我们value属性进行赋值
      :value="username" 
      第二步,绑定一个input的事件,当变化input变化,给我们username赋值为新的监听到的变化的新的数据
      因为value的值是username,所以会更新数据,从而实现双向绑定
      @input="username = (<HTMLInputElement>$event.target).value"
        > 
      -->

    <!-- v-model用在组件标签上 -->
    <!-- <AtguiguInput v-model="username"/> -->
    <!-- 虽然名字变了,但值是一样的用于监听表单元素的值变化事件 -->
    <!-- <AtguiguInput 
      :modelValue="username" 
      @update:modelValue="username = $event"
    /> -->

    <!-- 修改modelValue 
        开发中,常用的引用一个漂亮的已经的做好的UIinput等组件,
        我们双向绑定需要做的是,把我们父组件的值给子组件,在子组件中,再进行底层赋值...从而在我们的页面中实现双向绑定
        赋值的名字也要和我们的UI组件中设置的变量名进行同步..............
    -->
    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
import AtguiguInput from './AtguiguInput.vue'
// 数据
let username = ref('zhansgan')
let password = ref('123456')
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
